<template id="refundDetail">
    <div>
        <div class="refundDetail_top">
            <h3>退款详情</h3>
            <img src="../image/blue_da.png" alt="" @click="getRefundDetail()">
        </div>
        <div class="refundDetail" >
		     
			 <div class= "refundDetail_2" v-show="info.mode == 'goods'" @click="order_info()">
			    <span>{{info.name}}</span>
                <span>{{info.tips}}{{info.weight}}</span>
                <span>¥{{info.price}}</span>
				 <div> <img v-bind:src="info.thumb" alt=""></div>
            </div>
           <div class="successfulTrade_list"  v-show="info.mode == 'order'"  @click="order_info()">
				<ul>
					<li v-for="v in info.thumb"><img v-bind:src="v" alt=""></li>
				</ul>
             <span>共{{info.num}}件<time>></time></span>
           </div>
        </div>
        <p class="refundDetail_p1"><span>实际支付金额</span><span>¥{{info.price}}</span></p>
        <p class="refundDetail_p2"><span>实际退款金额</span><span>¥{{info.price}}<img src="../image/we.jpg" alt=""></span></p>
        <p class="refundDetail_p3">
            <span>问题类型</span>
            <span>
				<time  class="back_type back_border"  v-for="(item, index) in info.type" >
					<div v-bind:data-key="index" @click="back_bind('type',index)" v-bind:id="'back_type'+index"> {{item}}</div>
				</time>
			</span>
        </p>
        <p class="refundDetail_p4">
            <span><time>问题商品占比</time><time>请按照实际情况酌情选择问题商品占比</time></span>
            <span>
				<time  class="back_ratio back_border"  v-for="(item, index) in info.ratio" >
					<div v-bind:data-key="index" @click="back_bind('ratio',index)" v-bind:id="'back_ratio'+index"> {{item}}</div>
				</time>
			</span>
        </p>
        <div class="refundDetail_commit">
            <div class="refundDetail_center">
                <textarea name="" id="" cols="30" rows="10" @input="descInput" v-model="content" class="refundDetail_text" placeholder="请描述你的详细问题">
				
                </textarea>
                <span class="sp_refund">{{remnant}}/<time>100</time></span>
                <div class="refundDetail_tu">

                    <div class="f_k"><div v-for="img in images" class="d_fg"><img  v-bind:src="img"  alt="" ></div>
                        <div class="img_r showimg">
                            <img  src="../image/jia.jpg" alt="">
							<input type="file" class="files" @change="getFile($event)">
							<input type="hidden" value="back" v-model="source" >
                        </div>
                    </div>

                    <p v-show="shop">请上传商品包装袋上的快递单图片及所有问题的商品图片。单张图片大小不能超过6M,最多上传5张</p>

                </div>
			
                <div id="refund_span"  v-on:click="sendInfo()">提交</div>
            </div>

        </div>
    </div>
</template>

<script>
    export default {
        name:'refundDetail',
		data(){
            return{
                info:'',
				mode:'back_goods_info',
				order_id:this.$route.query.order_id,
				goods_id:this.$route.query.goods_id,
				file: '',
                source:'back',				
				back_type:'',
				back_ratio:'',
				content:'',
				images:[],
				remnant:0,
				shop:true,
            }
        },
		mounted:function(){
			//初始化
			this.getItems(this.mode,this.order_id,this.goods_id);
		
        },
        methods:{
			descInput(){
				var txtVal = this.content.length;
				this.remnant = 100 - txtVal;
			 },
			addPic(e){
                e.preventDefault();
                console.log(e);
            },
            getRefundDetail:function(){
                window.history.go(-1);
            },
			getItems:function(mode,order_id,goods_id){
				if(!order_id || order_id == 0){
					alert('ID异常');
					window.history.go(-1);
				}

                let url  = this.GLOBAL.BaseUrl+'/mobile/api/v1/Users.php?mode='+mode+'&order_id='+order_id+'&goods_id='+goods_id;
                let Data = this.GLOBAL.dataParam();
                
                this.$ajax.post(url,Data).then((res) => {
                    let temp = res.data;
                    if(temp.code == 200){
                        this.info = temp.data;
                    }else{
                        this.GLOBAL.center_error(this,temp);        
                    }  
                })  

			},
			sendInfo:function(){
				if(!this.order_id){
					alert('服务异常,请稍候刷新再试');return;
				}
				if( this.content.length >100){
					alert('申述内容不能超过100字');return;
				}
				
				var mode ='back_goods_api';
				var arr = [];
				arr['order']    = this.info.mode;
				arr['order_id'] = this.order_id;
				arr['goods_id'] = this.goods_id;
				arr['type']     = this.back_type;
				arr['ratio']    = this.back_ratio;
				arr['content']  = this.content;
				arr['images']   = JSON.stringify(this.images);
			
				var url   = this.GLOBAL.BaseUrl+'/mobile/api/v1/Users.php?mode='+mode;
                let Data  = this.GLOBAL.dataParam(arr);

                this.$ajax.post(url,Data).then((res) => {
                    let temp = res.data;
                    if(temp.code == 200){
                        alert('您的申请退款提交成功.');
                        location.reload();
                    }else{
                        this.GLOBAL.center_error(this,temp);        
                    }  
                })  

			},
			back_bind:function(type,index){
				if(type == 'type'){
					this.back_type = index;
					$('.back_type').css("border","1px solid #c5c5c5");
					$('#back_type'+index).parent().css("border","1px solid #fe8d23");
				}
				if(type == 'ratio'){
					
					this.back_ratio = index;
					$('.back_ratio').css("border","1px solid #c5c5c5");
					$('#back_ratio'+index).parent().css("border","1px solid #fe8d23");
				}
			},
			getFile(event) {
				let num  = this.images.length;
				if(num > 3){
					alert('最多上传4张图片');return false;
				}
				
				this.file = event.target.files[0];
				let config = {
					headers: {'Content-Type': 'multipart/form-data',}
				}

                let form = {"image":this.file,"source":this.source}                
                let url  = this.GLOBAL.BaseUrl+'/mobile/api/v1/Public.php?mode=image';
                let Data = this.GLOBAL.formParam(form);
			
				this.$ajax.post(url, Data, config).then((res) => {
                    let temp = res.data;
                    if(temp.code == 200){
						this.shop = false;
						this.images.push(temp.data)
					}else{
						this.GLOBAL.center_error(this,temp);  		
					}       
				}).catch((err) => {
					console.log(err);
				})
			},
            order_info:function(){
                this.$router.push('/successfulTrade?order_id='+this.order_id);
            }
        }
    }
</script>
<style>
 .showimg{
   position: relative;
     width:1.11rem;
     height: 1.09rem;
     display:block;
}
 .f_k{
     display:inline-block;
 }
 .img_r{
     position: relative;
     width:1.11rem;
     height: 1.09rem;
     display:inline-block;
 }
 .f_k .d_fg{
     display:inline-block;
     width:1.11rem;
     height: 1.09rem;

 }
.img_r .files {
    position: absolute;
    font-family: Arial;
    width:1.11rem;
    height: 1.09rem;
    cursor: pointer;
    background-color: #999999;
    opacity: 0;
    z-index: 3;
    left: 0;
    top: 0.6rem;
}	
 .back_show{
    border: 1px solid #fe8d23;
  }
 .back_border{
        display:block;
        flex:1;
        color:#c5c5c5;
        font-size:0.15rem;
        border:1px solid #c5c5c5;
        height:0.26rem;
        line-height:0.26rem;
        text-align:center;
        border-radius:0.1rem;
        margin:0.24rem 0.12rem;
    }
	
 .successfulTrade_list span{
        display:block;
        width:0.72rem;
        height:0.24rem;
        line-height:0.24rem;
        text-align:center;
        color:#000000;
        font-size:0.2rem;
        top:0.45rem;
        right:0.27rem;
        position:absolute;
    }
    .successfulTrade_list span time{
        color:#cfcecd;
    }
    .successfulTrade_list ul{
        width:5.45rem;
        height:0.75rem;
        display:flex;
        margin-left:0.1rem;
    }
    .successfulTrade_list ul li{
        height:0.75rem;
        width:0.76rem;
        margin:0 0.05rem;
		list-style:none;
    }
    .successfulTrade_list ul li img{
        height:0.75rem;
        width:0.76rem;
    }
    .successfulTrade_list{
        width:100%;
        height:1.09rem;
        border-bottom:1px solid #cfcecd;
        position:relative;
    }
	
    #refund_span{
        width:5.9rem;
        height:0.96rem;
        text-align:center;
        line-height:0.96rem;
        color:#ffffff;
        background:#2eaffc;
        font-size:0.33rem;
        border-radius:0.05rem;
    }
    .refundDetail_tu p{
        width:4.75rem;
        color:#c8c8c8;
        font-size:0.18rem;
        line-height:0.28rem;
        position:absolute;
        left:1.19rem;
        top:0.48rem;
    }
    .refundDetail_tu img{
        width:1.11rem;
        height:1.09rem;
        margin-top:0.5rem;
        top:0.48rem;
    }
    .refundDetail_tu{
        height:1.98rem;
        width:5.9rem;
        position:relative;
        margin-bottom:0.4rem;
    }
    .sp_refund{
        position:absolute;
        top:6.8rem;
        right:0.4rem;
        color:#adadad;
        display:block;
        font-size:0.15rem;
    }
    .refundDetail_text{
        width:5.9rem;
        height:1.42rem;
        background:#f2f2f2;
        border:0;
        outline:none;
        text-indent: 0.1rem;
        color:#adadad;
        font-size:0.17rem;
        position:relative;

    }
    .refundDetail_center{
        width:5.9rem;
        height:4.78rem;
        margin:0.3rem 0.24rem 0 0.24rem
    }
    .refundDetail_commit{
        width:100%;
        height:5.08rem;
      /*  padding:0.3rem 0.24rem 0 0.24rem;*/
    }
    .refundDetail_p4 span:nth-of-type(2){
        width:2.36rem;
        height:0.74rem;
        float:right;
        display:flex;
    }

    .refundDetail_p4 span:nth-of-type(1){
        width:3rem;
        height:0.6rem;
        float:left;
        padding-top:0.14rem;
    }
    .refundDetail_p4 span:nth-of-type(1) time:nth-of-type(1){
        display:block;
        width:1.87rem;
        height:0.3rem;
        line-height:0.3rem;
        text-align:center;
        color:#686868;
        font-size:0.21rem;
    }
    .refundDetail_p4 span:nth-of-type(1) time:nth-of-type(2){
        display:block;
        width:4.04rem;
        height:0.23rem;
        line-height:0.23rem;
        text-indent: 0.28rem;
        color:#c3c3c3;
        font-size:0.14rem;
    }
    .refundDetail_p4{
        width:100%;
        height:0.72rem;
        border-bottom:0.1rem solid #f5f4f2;
    }
    .refundDetail_p3 span:nth-of-type(2){
        float:right;
        width:2.36rem;
        height:0.74rem;
        display:flex;
    }

    .refundDetail_p3 span:nth-of-type(1){
        display:block;
        width:1.4rem;
        height:0.74rem;
        line-height:0.74rem;
        text-align:center;
        color:#686868;
        font-size:0.21rem;
        float:left;
    }
    .refundDetail_p3{
        width:100%;
        height:0.74rem;
        border-bottom:1px solid #d2d1cf;
    }
    .refundDetail_p2 span:nth-of-type(2) img{
        display:block;
        width:0.2rem;
        height:0.18rem;
        position:absolute;
        top:0.28rem;
        left:1.03rem;
    }
    .refundDetail_p2 span:nth-of-type(2){
        width:1.45rem;
        height:0.74rem;
        line-height:0.74rem;
        text-align:center;
        float:right;
        color:#fc1dac;
        font-size:0.2rem;
        position:relative;
    }
    .refundDetail_p2 span:nth-of-type(1){
        width:1.86rem;
        height:0.74rem;
        line-height:0.74rem;
        text-align:center;
        float:left;
        color:#686868;
        font-size:0.21rem;
    }
    .refundDetail_p2{
        width:100%;
        height:0.74rem;
        border-bottom:1px solid #d2d1cf;
    }
    .refundDetail_p1 span:nth-of-type(2){
        width:1.11rem;
        height:0.74rem;
        line-height:0.74rem;
        text-align:center;
        float:right;
        color:#fc1dac;
        font-size:0.2rem;

    }
    .refundDetail_p1 span:nth-of-type(1){
        width:1.86rem;
        height:0.74rem;
        line-height:0.74rem;
        text-align:center;
        float:left;
        color:#686868;
        font-size:0.21rem;
    }
    .refundDetail_p1{
        width:100%;
        height:0.74rem;
        border-bottom:1px solid #d2d1cf;
    }
    .refundDetail{
        height:1.24rem;
        width:100%;
        border-bottom:0.14rem solid #f5f4f2;

    }

    .refundDetail_p time{
        color:#ffaa55;
    }
    .refundDetail_2 span:nth-of-type(1){
        width:5.16rem;
        height:0.47rem;
        line-height:0.47rem;
        text-indent: 1.34rem;
        color:#353535;
        font-size:0.2rem;
        display:block;
        margin-top:0.14rem;
    }
    .refundDetail_2 span:nth-of-type(2){
        width:5.16rem;
        text-indent: 1.34rem;
        height:0.4rem;
        line-height:0.4rem;
        color:#9e9e9e;
        font-size:0.18rem;
        display:block;
    }
    .refundDetail_2 span:nth-of-type(3){
        width:0.8rem;
        height:0.47rem;
        display:block;
        position:absolute;
        line-height:0.47rem;
        text-align:center;
        color:#474747;
        font-size:0.2rem;
        right:0.2rem;
        top:0.13rem;
    }
    .refundDetail_2 img{
        display:block;
        width:0.89rem;
        height:0.89rem;
        position:absolute;
        left:0.3rem;
        top:0.13rem;
    }
    .refundDetail_2{
        width:100%;
        height:1.23rem;
        position:relative;
    }
    .refundDetail_top h3{
        width:100%;
        height:0.79rem;
        line-height:0.79rem;
        text-align:center;
        color:#2eaffc;
        font-size:0.28rem;
    }
    .refundDetail_top img{
        display:block;
        position:absolute;
        height:0.36rem;
        width:0.36rem;
        left:0.27rem;
        top:0.25rem;
    }
    .refundDetail_top{
        width:100%;
        height:0.79rem;
        border-bottom:1px solid #cfcecd;
        position:relative;
    }
</style>


